<template>
  <div class="echart" :id="echarts" :style="styles" />
</template>

<script>
export default {
  name: 'Index',
  props: {
    styles: {
      type: Object,
      default: null,
    },
    optionData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      myChart: null,
      timeId: null,
      autoType: 'showTip'
    };
  },
  computed: {
    echarts() {
      return 'echarts' + Math.ceil(Math.random() * 100) +  Math.ceil(Math.random() * 100);
    },
  },
  watch: {
    optionData: {
      handler(newVal, oldVal) {
        this.handleSetVisitChart();
      },
      deep: true, // 对象内部属性的监听，关键。
    },
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById(this.echarts));
    
    // 鼠标移入事件
    this.myChart.on('mouseover',(e) => {
      clearInterval(this.timeId)
      this.onMouseover(e)
    })
    // 鼠标移出
    this.myChart.on('mouseout',(e) => {
      this.onMouseout()
    })
    this.showLoading()
    this.$nextTick(() => {
      // this.handleSetVisitChart();
      window.addEventListener('resize', () => {
        this.onResize()
        setTimeout(() => {
          this.onResize()
        },30)
      });
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
    if (!this.myChart) {
      return;
    }
    this.stopPlay()
    this.myChart.dispose();
    this.myChart = null;
  },
  methods: {
    onResize() {
      if(!this.myChart) return
      this.myChart.resize();
    },
    showLoading() {
      this.myChart.showLoading({
          text: "",
          textColor: '#ffffff',
          color: '#66ffff',
          maskColor: 'rgba(3,12,49,.8)'
      })
    },
    hideLoading() {
      this.myChart.hideLoading()
    },
    handleSetVisitChart() {
      this.showLoading()
      let option = null;
      option = this.optionData;
      // 更新数据
      this.myChart.setOption(option, true);
      // this.onResize()
      this.$emit('echartsInit')
      this.hideLoading()
    },
    // 鼠标移入事件
    onMouseover(e) {
        this.myChart.dispatchAction({
          type: 'downplay'
        })
        this.myChart.dispatchAction({
          type: this.autoType,
          seriesIndex: 0,
          dataIndex:  e.dataIndex,
          position: 'inside'
        })
        this.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: e.dataIndex
        })
    },
    // 鼠标移出事件
    onMouseout() {
        this.myChart.dispatchAction({
          type: 'downplay'
        })
        this.autoPlay()
    },
    // 自动播放
    autoPlay(type = 'showTip') {
      this.autoType = type
      const list = this.optionData.series[0].data
      let index = 0
      clearInterval(this.timeId)
      this.timeId = setInterval(() => {
        this.myChart.dispatchAction({
          type: 'downplay'
        })
        this.myChart.dispatchAction({
          type: this.autoType,
          seriesIndex: 0,
          dataIndex: index,
          position: 'inside'
        })
        this.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: index
        })
        index += 1
        if(index > list.length) {
          index = 0
        }
      },2000)
    },
    stopPlay() {
      clearInterval(this.timeId)
    }
  },
};
</script>

<style scoped>
.echart {
  height: 100%;
}
</style>
